<template>
  <div>

    <el-card style="width: 100%">

      <el-container style="width: 100%;">

        <el-header style="display: block;height: 250px">

          <el-card class="box-card" style="width: 330px;height:200px;float:left;margin: 0 18px">
            <div style="width: 100%">
              <h1 style="margin: auto 0;display: block;width: 260px;text-align: center">车位缴费率</h1>
              <el-divider></el-divider>
            </div>

            <div style="float: left;padding: 20px 0;margin: 0 20px 0 0;width: 180px;">

              <h1 style="font-size: 40px">{{this.a1}}%</h1>
            </div>

          </el-card>
          <el-card class="box-card" style="width: 330px;height:200px;float:left;margin: 0 18px">
            <div style="width: 100%">
              <h1 style="margin: auto 0;display: block;width: 260px;text-align: center">物业缴费率</h1>
              <el-divider></el-divider>
            </div>

            <div style="float: left;padding: 20px 0;margin: 0 20px 0 0;width: 180px">
              <h1 style="font-size: 40px">{{this.a2}}%</h1>
            </div>

          </el-card>
          <el-card class="box-card" style="width: 330px;height:200px;float:left;margin: 0 18px">
            <div style="width: 100%">
              <h1 style="margin: auto 0;display: block;width: 260px;text-align: center">投诉数量</h1>
              <el-divider></el-divider>
            </div>

            <div style="float: left;padding: 20px 0;margin: 0 20px 0 0;width: 180px">
              <h1 style="font-size: 40px">{{this.a3}}条</h1>
            </div>

          </el-card>

          <el-card class="box-card" style="width: 330px;height:200px;float:left;margin: 0 18px">
            <div style="width: 100%">
              <h1 style="margin: auto 0;display: block;width: 260px;text-align: center">报修数量</h1>
              <el-divider></el-divider>
            </div>
            <div style="float: left;padding: 20px 0;margin: 0 20px 0 0;width: 180px">
              <h1 style="font-size: 40px">{{this.a4}}条</h1>
            </div>

          </el-card>

        </el-header>


        <el-main style="width: 100%;display: block">
          
          <div style="float: left">

            <div ref="surface1" style="width: 950px;height: 450px">

            </div>

          </div>
          <div style="float: left">

            <div ref="surface2" style="width: 450px;height: 450px;margin: 0 0 0 50px">

            </div>

          </div>
          


        </el-main>

      </el-container>

    </el-card>

  </div>

</template>

<script>
import * as surf from 'echarts';

export default {
  data() {
    return {
      Arr1: [],
      Arr2: [],
      Arr3: [],
      Arr4: [],
      Arr5: [],
      Arr6: '',
      Arr7: '',
      Arr8: '',
      Arr9: '',
      Arr10: '',
      a1: '',
      a2: '',
      a3: '',
      a4: '',

    }
  },

  mounted() {


  },
  created: function () {
    this.axios.get("http://localhost:8080/home/car").then((response) => {
      this.a1 = response.data.data
    })
    this.axios.get("http://localhost:8080/home/property").then((response) => {
      this.a2 = response.data.data
    })
    this.axios.get("http://localhost:8080/home/complaint").then((response) => {
      this.a3= response.data.data
    })
    this.axios.get("http://localhost:8080/home/repair").then((response) => {
      this.a4 = response.data.data
    })


    this.axios.get("http://localhost:8080/home/building/list").then((response) => {

      this.Arr1 = response.data.data
      this.$message.success("欢迎进入和邦物业后台管理系统")
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);

    })
    this.axios.get("http://localhost:8080/home/house/list").then((response) => {
      this.Arr2 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })
    this.axios.get("http://localhost:8080/home/owner/list").then((response) => {
      this.Arr3 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })
    this.axios.get("http://localhost:8080/meter/meter/list").then((response) => {
      this.Arr4 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })
    this.axios.get("http://localhost:8080/home/parking/list").then((response) => {
      this.Arr5 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })

    this.axios.get("http://localhost:8080/home/building/value").then((response) => {
      this.Arr6 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })
    this.axios.get("http://localhost:8080/home/house/value").then((response) => {
      this.Arr7 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })
    this.axios.get("http://localhost:8080/home/owner/value").then((response) => {
      this.Arr8 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })
    this.axios.get("http://localhost:8080/home/meter/value").then((response) => {
      this.Arr9 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '车位'},
              {value: this.Arr10, name: '流量'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })
    this.axios.get("http://localhost:8080/home/parking/value").then((response) => {
      this.Arr10 = response.data.data
      let mysurface1 = surf.init(this.$refs.surface1)
      let mysurface2 = surf.init(this.$refs.surface2)
      let option1 = {
        title: {
          text: '指标图名-报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['楼宇注册率', '房屋入住率', '业主注册率', '车位订阅率', '每周用电率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '楼宇注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr1
          },
          {
            name: '房屋入住率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr2
          },
          {
            name: '业主注册率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr3
          },
          {
            name: '车位订阅率',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr4
          },
          {
            name: '每周用电率',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.Arr5
          }
        ]
      };
      let option2 = {
        title: {
          text: '指标名称-玫瑰图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.Arr6, name: '楼宇'},
              {value: this.Arr7, name: '房屋'},
              {value: this.Arr8, name: '户主'},
              {value: this.Arr9, name: '流量'},
              {value: this.Arr10, name: '车位'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      mysurface1.setOption(option1);
      mysurface2.setOption(option2);
    })


  },
  methods() {

  }

}
</script>

<style scoped>

</style>